<template>
  <div>
    <van-cell-group title="基础雷达图">
      <div id="myChart" ref="myChart" />
    </van-cell-group>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    initOptions() {
      var chartDom = document.getElementById('myChart');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: [
          {
            indicator: [
              { text: 'Brand', max: 100 },
              { text: 'Content', max: 100 },
              { text: 'Usability', max: 100 },
              { text: 'Function', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: 80
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40],
                name: 'A Software'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
              {
                value: [85, 90, 90, 95, 95],
                name: 'A Phone'
              },
              {
                value: [95, 80, 95, 90, 93],
                name: 'Another Phone'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
              {
                name: 'Precipitation',
                value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3]
              },
              {
                name: 'Evaporation',
                value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#myChart {
  width: 100%;
  height: 280px;
}
</style>
